import { VxeUI } from 'vxe-pc-ui';
import { ElDatePicker } from 'element-plus';
import { useDateFormat } from '@vueuse/core';
import { getNestedPropertyValue } from './utils';
import { smartTranslate as $t } from '@/lang';

/**
 * 提取日期格式的通用函数
 * @param {Object} renderOpts - 渲染选项
 * @param {Object} itemRender - 项目渲染配置
 * @param {Object} props - 属性对象
 * @param {Object} attrs - 特性对象
 * @returns {string} 日期格式
 */
const extractFormat = (renderOpts, itemRender = {}, props = {}, attrs = {}) => {
  return (
    props.format ||
    attrs.format ||
    renderOpts.format ||
    renderOpts.options?.format ||
    renderOpts.config?.format ||
    itemRender.format ||
    'YYYY-MM-DD'
  );
};

/**
 * 提取值格式的通用函数
 * @param {Object} renderOpts - 渲染选项
 * @param {Object} itemRender - 项目渲染配置
 * @param {Object} props - 属性对象
 * @param {Object} attrs - 特性对象
 * @returns {string} 值格式
 */
const extractValueFormat = (
  renderOpts,
  itemRender = {},
  props = {},
  attrs = {},
) => {
  return (
    props.valueFormat ||
    attrs.valueFormat ||
    renderOpts.valueFormat ||
    renderOpts.options?.valueFormat ||
    renderOpts.config?.valueFormat ||
    itemRender.valueFormat ||
    'YYYY-MM-DD'
  );
};

/**
 * 提取日期选择器类型的通用函数
 * @param {Object} renderOpts - 渲染选项
 * @param {Object} itemRender - 项目渲染配置
 * @param {Object} props - 属性对象
 * @param {Object} attrs - 特性对象
 * @returns {string} 日期选择器类型
 */
const extractDateType = (
  renderOpts,
  itemRender = {},
  props = {},
  attrs = {},
) => {
  return (
    props.type ||
    attrs.type ||
    renderOpts.type ||
    renderOpts.options?.type ||
    renderOpts.config?.type ||
    itemRender.type ||
    'date'
  );
};

/**
 * 获取属性值的通用函数
 * @param {string} attrName - 属性名
 * @param {*} defaultValue - 默认值
 * @param {Object} sources - 属性来源对象数组
 * @returns {*} 属性值
 */
const getAttributeValue = (attrName, defaultValue, ...sources) => {
  for (const source of sources) {
    if (source && source[attrName] !== undefined) {
      return source[attrName];
    }
  }
  return defaultValue;
};

/**
 * 格式化日期显示的通用函数
 * @param {*} value - 日期值
 * @param {string} format - 显示格式
 * @param {string} type - 日期选择器类型
 * @returns {string} 格式化后的日期字符串
 */
const formatDateDisplay = (value, format, type) => {
  if (!value) return '-';

  try {
    const vueuseFormat = format;
    // 处理日期范围类型
    if (type === 'daterange' || type === 'datetimerange') {
      if (Array.isArray(value) && value.length === 2) {
        // 使用 useDateFormat 格式化开始和结束日期
        const startDate = useDateFormat(value[0], vueuseFormat).value;
        const endDate = useDateFormat(value[1], vueuseFormat).value;
        return `${startDate} ~ ${endDate}`;
      }
      return '-';
    }

    // 处理单个日期
    return useDateFormat(value, vueuseFormat).value;
  } catch (error) {
    console.warn('RaElDatePickerRender: Date formatting error:', error);
    return String(value); // 出错时返回原始值
  }
};

/**
 * 渲染日期显示的通用函数（用于显示模式）
 * @param {Object} renderOpts - 渲染选项
 * @param {Object} params - 参数对象
 * @returns {JSX.Element} 渲染结果
 */
const renderDateDisplay = (renderOpts, params) => {
  // 确定有效的数据和列上下文
  const effectiveData = params?.row || renderOpts.row || renderOpts.data || {};
  const effectiveColumn = params?.column || renderOpts.column || {};

  // 获取字段名
  const field =
    effectiveColumn.field || effectiveColumn.property || params?.field;

  if (!field) {
    console.warn(
      'RaElDatePickerRender: Missing field identifier in display mode',
    );
    return <span>-</span>;
  }

  // 获取当前值
  // const value = effectiveData[field];
  // 获取当前值，使用辅助函数支持多层属性访问
  const value = getNestedPropertyValue(effectiveData, field);

  // 获取配置信息
  const props = renderOpts.props || {};
  const attrs = renderOpts.attrs || {};

  // 提取格式和类型
  const format = extractFormat(renderOpts, {}, props, attrs);
  const type = extractDateType(renderOpts, {}, props, attrs);

  // 格式化日期显示
  const displayText = formatDateDisplay(value, format, type);

  // 返回格式化的日期文本
  return (
    <span
      style={{
        color: displayText === '-' ? '#c0c4cc' : 'inherit',
        fontSize: '14px',
      }}
    >
      {displayText}
    </span>
  );
};

/**
 * 通用渲染逻辑函数（用于编辑模式）
 * @param {Object} renderOpts - 渲染选项
 * @param {Object} params - 参数对象
 * @returns {JSX.Element} 渲染结果
 */
const renderElDatePicker = (renderOpts, params) => {
  // 确定有效的数据和项上下文
  const effectiveData = params?.row || params?.data || renderOpts.data || {};
  const effectiveItem = params?.item || renderOpts.item || {};
  const effectiveColumn = params?.column || {};

  // 确定字段名
  const field =
    params?.field ||
    effectiveColumn.field ||
    effectiveItem.field ||
    renderOpts.field;

  if (!field) {
    console.error(
      'RaElDatePickerRender: Missing field identifier in edit mode',
    );
    return null;
  }

  // 获取当前值
  const value = effectiveData[field];

  // 从effectiveItem中获取配置信息
  const itemRender = effectiveItem.itemRender || {};
  const props = itemRender.props || renderOpts.props || {};
  const attrs = itemRender.attrs || renderOpts.attrs || {};
  const events = itemRender.events || renderOpts.events || {};

  // 事件处理器
  const updateValue = (val) => {
    // 更新数据
    if (params?.row) {
      params.row[field] = val;
    } else if (params?.data) {
      params.data[field] = val;
    } else if (renderOpts.data) {
      renderOpts.data[field] = val;
    }

    // 触发原始事件
    events.change?.(val, effectiveData, params || renderOpts);
  };

  // 提取配置属性
  const format = extractFormat(renderOpts, itemRender, props, attrs);
  const valueFormat = extractValueFormat(renderOpts, itemRender, props, attrs);
  const type = extractDateType(renderOpts, itemRender, props, attrs);

  // 获取占位符文本
  const getRangePlaceholders = () => {
    const type = extractDateType(renderOpts, itemRender, props, attrs);
    const isRange = type.includes('range');

    // 优先从属性中获取显式设置的占位符
    const startPlaceholder = getAttributeValue(
      'startPlaceholder',
      null,
      props,
      attrs,
      itemRender,
      renderOpts,
    );

    const endPlaceholder = getAttributeValue(
      'endPlaceholder',
      null,
      props,
      attrs,
      itemRender,
      renderOpts,
    );

    // 次优先处理 placeholder 属性（兼容旧版数组传参）
    const placeholderVal = getAttributeValue(
      'placeholder',
      null,
      props,
      attrs,
      itemRender,
      renderOpts,
    );

    // 生成智能默认值
    const getDefaultPlaceholder = (position) => {
      switch (type) {
        case 'datetimerange':
          return position === 'start'
            ? $t('common.message.placeholder.datetime_start')
            : $t('common.message.placeholder.datetime_end');
        case 'monthrange':
          return position === 'start'
            ? $t('common.message.placeholder.month_start')
            : $t('common.message.placeholder.month_end');
        default: // daterange
          return position === 'start'
            ? $t('common.message.placeholder.date_start')
            : $t('common.message.placeholder.date_end');
      }
    };

    if (isRange) {
      return {
        startPlaceholder:
          startPlaceholder ||
          (Array.isArray(placeholderVal)
            ? placeholderVal[0]
            : placeholderVal) ||
          getDefaultPlaceholder('start'),
        endPlaceholder:
          endPlaceholder ||
          (Array.isArray(placeholderVal)
            ? placeholderVal[1]
            : placeholderVal) ||
          getDefaultPlaceholder('end'),
      };
    }

    // 非范围选择器的处理
    return {
      placeholder: placeholderVal || getDefaultPlaceholder(),
    };
  };

  const placeholders = getRangePlaceholders();

  // 合并所有可能的属性，itemRender 的属性优先于 renderOpts
  const mergedAttrs = {
    ...(renderOpts.attrs || {}),
    ...(renderOpts.props || {}),
    ...attrs, // itemRender.attrs
    ...props, // itemRender.props
    ...(type.includes('range')
      ? {
          startPlaceholder: placeholders.startPlaceholder,
          endPlaceholder: placeholders.endPlaceholder,
        }
      : { placeholder: placeholders.placeholder }),
  };

  // 返回ElDatePicker组件
  return (
    <ElDatePicker
      modelValue={value}
      onUpdate:modelValue={updateValue}
      type={type}
      format={format}
      valueFormat={valueFormat}
      // 展开所有合并的属性
      {...mergedAttrs}
      // 明确传递常用属性
      disabled={getAttributeValue(
        'disabled',
        renderOpts.disabled || false,
        props,
        attrs,
        itemRender,
        renderOpts,
      )}
      readonly={getAttributeValue(
        'readonly',
        false,
        props,
        attrs,
        itemRender,
        renderOpts,
      )}
      clearable={getAttributeValue(
        'clearable',
        true,
        props,
        attrs,
        itemRender,
        renderOpts,
      )}
      size={getAttributeValue(
        'size',
        undefined,
        props,
        attrs,
        itemRender,
        renderOpts,
      )}
      style={{
        width: '100%',
        ...getAttributeValue('style', {}, props, attrs, itemRender, renderOpts),
      }}
      // 事件处理
      onChange={updateValue}
      onBlur={(event) =>
        events.blur?.(event, effectiveData, params || renderOpts)
      }
      onFocus={(event) =>
        events.focus?.(event, effectiveData, params || renderOpts)
      }
    />
  );
};

// 注册支持多种上下文的渲染器
VxeUI.renderer.add('RaElDatePickerRender', {
  // 表格单元格编辑模式
  renderTableEdit(renderOpts, params) {
    return renderElDatePicker(renderOpts, params);
  },

  // 表格单元格显示模式
  renderTableCell(renderOpts, params) {
    return renderDateDisplay(renderOpts, params);
  },

  // 表单项目渲染
  renderItemContent(renderOpts, params) {
    return renderElDatePicker(renderOpts, params);
  },

  // 默认显示模式（与renderTableCell相同）
  renderDefault(renderOpts, params) {
    return renderDateDisplay(renderOpts, params);
  },
});

export default 'RaElDatePickerRender';
